<!--
 * @Descripttion: 
 * @version: 
 * @Author: lsy
 * @Date: 2021-12-09 15:21:19
 * @LastEditors: lsy
 * @LastEditTime: 2021-12-09 17:24:22
-->

<template>
    <a-form id="login_form" :form="form" class="login-form" @submit="handleSubmit">
        <a-form-item>
            <a-input
                v-decorator="[
                    'username',
                    {
                        rules: [{ required: true, message: '请输入用户名!' }],
                    },
                ]"
                placeholder="用户名"
            >
                <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input>
        </a-form-item>
        <a-form-item>
            <a-input
                v-decorator="[
                    'password',
                    {
                        rules: [
                            { required: true, message: '请输入密码!' }
                        ],
                    },
                ]"
                type="password"
                placeholder="密码"
            >
                <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input>
        </a-form-item>
        <a-form-item>
            <!-- <a class="login-form-forgot" href>忘记密码</a> -->
            <a-button type="primary" html-type="submit" class="login-form-button">登录</a-button>
        </a-form-item>
    </a-form>
</template>

<script>
import { JSEncrypt } from 'jsencrypt'
import qs from 'qs';
export default {
    name: "loginContent",
    data() {
        return {
            form: this.$form.createForm(this, { name: 'normal_login' })
        }
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    VE_API.system.getPublic_key({}, `?username=${values.username}`).then(res => {//获取public_key
                        let jsencrypt = new JSEncrypt();
                        jsencrypt.setPublicKey(res.data.data.publicKey);
                        let obj = {
                            username: values.username,
                            password: jsencrypt.encrypt(values.password),
                            grant_type: "password",
                            client_id: "web_client",
                            client_secret: "web_client",
                            public_key: res.data.data.publicKey,
                        }
                        VE_API.system.refreshToken({}, `?${qs.stringify(obj)}`).then(//获取token
                            data => {
                                const { access_token, magicId, refresh_token, remainderDays, userId } = data.data.data;
                                localStorage.setItem('accessToken', access_token);
                                localStorage.setItem('magicId', magicId);
                                localStorage.setItem('refreshToken', refresh_token);
                                localStorage.setItem('remainderDays', remainderDays);
                                localStorage.setItem('userId', userId);
                                localStorage.setItem('UserName', values.username);
                                this.$router.push('/');
                            }, error => {
                                let str = `账号或密码错误`;
                                if (error.data.data.remainingTimes) {
                                    str += `,还可尝试${error.data.data.remainingTimes}次`;
                                }
                                if (error.data.data.remainingTime) {
                                    str += `,已锁定${error.data.data.remainingTime}秒`;
                                }
                                Message.error(str);
                                console.log("error", error)
                            }
                        )
                    }, err => {
                        Message.error(`获取公钥失败`)
                        console.log(err)
                    })
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.login-form-button {
    width: 100%;
}
</style>